
import React, { useState } from 'react';
import { http } from '../../utils'

const AiTask = () => {
  const [input, setInput] = useState(''); // 用户输入
  const [messages, setMessages] = useState([]); // 聊天记录

  // 发送消息到后端 API
  const sendMessage = async () => {
    if (!input.trim()) return; // 如果输入为空，直接返回

    // 将用户消息添加到聊天记录
    setMessages(prev => [...prev, { sender: 'user', text: input }]);

    try {
      // 调用 API 接口
      const res = await http.post('/main/chat', { message: input });
      console.log('机器人回复:', res);

      // 将机器人回复添加到聊天记录
      // setMessages(prev => [...prev, { sender: 'bot', text: botReply }]);
    } catch (error) {
      console.error('发送消息失败:', error);
      setMessages(prev => [...prev, { sender: 'bot', text: '抱歉，机器人暂时无法响应。' }]);
    }

    setInput(''); // 清空输入框
  };

  let callback = (res) => {
    // 第一个参数传入回调结果，结果如下：

    // ret Int 验证结果，0：验证成功。2：用户主动关闭验证码。

    // ticket String 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。

    // CaptchaAppId String 验证码应用ID。

    // bizState Any 自定义透传参数。

    // randstr String 本次验证的随机串，后续票据校验时需传递该参数。

    console.log('callback:', res);

    // res（用户主动关闭验证码）= {ret: 2, ticket: null}

    // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}

    // res（请求验证码发生错误，验证码自动返回trerror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"}

    // 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理

    if (res.ret === 0) {
      // 复制结果至剪切板

      var str = '【randstr】->【' + res.randstr + '】 【ticket】->【' + res.ticket + '】';

      var ipt = document.createElement('input');

      ipt.value = str;

      document.body.appendChild(ipt);

      ipt.select();

      document.execCommand('Copy');

      document.body.removeChild(ipt);


    }
  }
  let loadErrorCallback = () => {
    var appid = '197649781';

    // 生成容灾票据或自行做其它处理

    var ticket = 'trerror_1001_' + appid + '_' + Math.floor(new Date().getTime() / 1000);

    callback({
      ret: 0,

      randstr: '@' + Math.random().toString(36).substr(2),

      ticket: ticket,

      errorCode: 1001,

      errorMessage: 'jsload_error',
    });
  }
  let onCaptchaShow = () => {
    try {
      // 生成一个验证码对象

      // CaptchaAppId：登录验证码控制台，从【验证管理】页面进行查看。如果未创建过验证，请先新建验证。注意：不可使用客户端类型为小程序的CaptchaAppId，会导致数据统计错误。

      // callback：定义的回调函数

      const captcha = new TencentCaptcha('197649781', callback, {});

      // 调用方法，显示验证码

      captcha.show();
    } catch (error) {
      // 加载异常，调用验证码js加载错误处理函数

      loadErrorCallback();
    }
  }

  return (
    <div className="chat-container">
      <button className="login_code-button" onClick={onCaptchaShow}>获取验证码</button>
      <div className="chat-messages">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.sender}`}>
            {msg.text}
          </div>
        ))}
      </div>
      <div className="chat-input">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入消息..."
        />
        <button onClick={sendMessage}>发送</button>
      </div>
    </div>
  );
};

export default AiTask;